<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
      }
      .nav ul {
        width: 800px;
        height: 45px;
        display: flex;
        justify-content: space-around;
        margin: 30px auto 0;
        border-bottom: 1px solid #e5e5e5;
      }
      .nav li {
        text-align: center;
        width: 65px;
        height: 34px;
        margin-top: 10px;
      }
      .nav .active {
        font-weight: 700;

        border-bottom: 3px solid #10aeb5;
      }
      .nav .active a {
        color: #10aeb5;
      }
      .china {
        height: 230px;
        width: 800px;
        margin: 10px auto;
      }
      .china .title {
      }
      .china_info {
        width: 800px;
        height: 200px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 20px;
      }
      .info_one {
        width: 183px;
        height: 62px;
        text-align: center;
        line-height: 22px;
      }
      .echarts {
        width: 800px;
        margin: 20px auto;
      }
      .citylist {
        width: 800px;
        margin: 0 auto;
      }
      .citylist table {
        width: 800px;
        text-align: center;
      }
      .citylist th {
        margin-left: 3px;
        background: #ccc;
      }
      th {
        text-align: center;
      }
      tr td:nth-child(1) {
        text-align: left;
        color: white;
        background: rgba(0, 190, 199, 0.6);
        position: relative;
        text-indent: 80px;
      }

      tr td:nth-child(1)::after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border: 4px solid white;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid transparent;
        position: absolute;
        left: 40px;
        top: 5px;
      }
      td {
        text-align: center;
      }
      .second_list {
        width: 800px;
        /* top: 24px;
        left: 0; */
        /* position: absolute; */
        /* z-index: 999; */
        color: black;
        text-align: center;
        display: none;
      }
      .second_list tr td:nth-child(1) {
        background: white;
        color: turquoise;
      }
      .second_list tr {
        text-align: center;
      }
      .second_list td {
        text-indent: 0 !important;
      }
      #news {
        width: 800px;
        margin: 20px auto;
      }
      #news .news_one {
        margin-top: 10px;
      }
      .news_one .title {
        background: #ccc;
      }
      .news_one .con {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <ul>
        <li class="active"><a href="#"> 国内疫情</a></li>
        <li><a href="#"> 国外疫情</a></li>
        <li><a href="#"> 实时播报</a></li>
      </ul>
    </div>
    <div class="china">
      <div class="title">
        <h3>国内疫情</h3>
        <span class="date">数据更新至 2020.08.05 10:26</span>
      </div>
      <div class="china_info">
        <div class="info_one">
          <p>现有确认</p>
          <p class="confirmedNum">2922</p>
          <p>昨日-16</p>
        </div>
        <div class="info_one">
          <p>无症状</p>
          <p class="seriousNum">2922</p>
          <p>昨日-16</p>
        </div>
        <div class="info_one">
          <p>现有疑似</p>
          <p class="suspectedNum">2922</p>
          <p>昨日-16</p>
        </div>
        <div class="info_one">
          <p>现有重症</p>
          <p class="seriousNum">2922</p>
          <p>昨日-16</p>
        </div>
        <div class="info_one">
          <p>累计确诊</p>
          <p>2922</p>
          <p>昨日-16</p>
        </div>
        <div class="info_one">
          <p>境外输入</p>
          <p class="suspectedNum">2922</p>
          <p class="suspectedIncr">昨日-16</p>
        </div>
        <div class="info_one">
          <p>累计治愈</p>
          <p class="curedNum">2922</p>
          <p class="curedIncr">昨日-16</p>
        </div>
        <div class="info_one">
          <p>累计死亡</p>
          <p class="deadNum">2922</p>
          <p>昨日-16</p>
        </div>
      </div>
    </div>
    <div class="echarts">
      <!-- 准备生成图表的div元素 -->
      <div id="main" style="width: 715;height:465px;"></div>
    </div>
    <!-- 列表部分 -->
    <div class="citylist">
      <table border="1">
        <thead>
          <tr>
            <th>疫情地区</th>
            <th>新增</th>
            <th>现有</th>
            <th>累计</th>
            <th>治愈</th>
            <th>死亡</th>
          </tr>
        </thead>
        <tbody id="firstList">
          <!-- <tr>
            <td>
              河北
              <table class="second_list" border="1">
                <tbody>
                  <tr>
                    <td>石家庄</td>
                    <td>11</td>
                    <td>32</td>
                    <td>23</td>
                    <td>435</td>
                    <td>345</td>
                  </tr>
                </tbody>
              </table>
            </td>
            <td>23</td>
            <td>23</td>
            <td>12</td>
            <td>23</td>
            <td>12</td>
          </tr> -->
        </tbody>
      </table>
    </div>
    <!-- 新闻部分 -->
    <div id="news">
      <div class="news_list">
        <div class="news_one">
          <p>2020-08-08</p>
          <div class="title">主标题</div>
          <div class="con">内容</div>
        </div>
      </div>
    </div>

    <div style="margin-bottom: 500px;"></div>
    <script
      crossorigin="anonymous"
      integrity="sha384-et+fqdf7kslHL5Ip8rXSJPUPODLa7eMfpFTBaCfnlMzrcAz/wxI5Xm/mNTZwd+7H"
      src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"
    ></script>

    <script src="jquery-3.2.1.js"></script>
    <script src="./loadEchart.js"></script>
    <script src="./loadList.js"></script>
    <script src="news.js"></script>
    <script>
      // 请求数据
      $.ajax({
        url: 'https://route.showapi.com/2217-2',
        type: 'post',
        data: {
          showapi_appid: '315346',
          showapi_sign: '2a9e921778704e419d76ee49f78d7bc4'
        },
        success: function(res) {
          console.log(res)
          var {
            todayStatictic, //今日数量
            updateTime, //更新时间
            ret_code, //是否请求成功
            todayDetailList //城市详细数据列表
          } = res.showapi_res_body
          // 现有确诊
          $('.confirmedNum').html(todayStatictic.confirmedNum)
          $('.deadNum').html(todayStatictic.deadNum)
          $('.suspectedNum').html(todayStatictic.suspectedNum)
          $('.curedNum').html(todayStatictic.curedNum)
          $('.seriousNum').html(todayStatictic.seriousNum)
          $('.curedIncr').html('昨日+' + todayStatictic.curedIncr)
          $('.suspectedIncr').html('昨日+' + todayStatictic.suspectedIncr)
          $('.suspectedNum').html(todayStatictic.suspectedNum)
          $('.date').html(updateTime) //更新时间
          //加载柱状图
          loadEcharts(todayDetailList)
          //加载列表部分
          loadList(todayDetailList)
        }
      })
    </script>
  </body>
</html>
